<template>
  <div class="footer">
    <div>
      <i class="icon icon-shouye"></i>
      <p>首页</p>
    </div>
    <div>
      <i class="icon icon-tubiaozhizuomoban"></i>
      <p>分类</p>
    </div>
    <div>
      <i class="icon icon-huiyuan"></i>
      <p>会员中心</p>
    </div>
    <div>
      <i class="icon icon-gouwuche"></i>
      <p>购物车</p>
    </div>
    <div>
      <i class="icon icon-geren"></i>
      <p>个人</p>
    </div>
  </div>
</template>
<script>
export default {
  
};
</script>
<style lang="scss" scoped>
html,
body {
  height: 100%;
}

@function vw($px) {
  @return ($px / 750) * 100vw;
}

@font-face {
  font-family: "icon";
  src: url(../font/iconfont.eot) format("eot"),
    url(../font/iconfont.svg) format("svg"),
    url(../font/iconfont.ttf) format("ttf"),
    url(../font/iconfont.woff) format("woff");
}

.icon {
  font-family: "icon";
}

.footer {
  position: absolute;
  width: 100%;
  height: vw(63);
  bottom: 0;
  background: #fff;
  display: flex;
  box-shadow: 0 8px 30px grey;

  div {
    width: 20%;
    font-size: vw(18);
    text-align: center;
    color: #858585;

    i {
      font-size: vw(34);
    }
  }
}
</style>